<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>\my_jquery_图片相册图集 示例1、示例2</title>
<meta name="description" content="{dede:global.cfg_description/}" />
<meta name="keywords" content="{dede:global.cfg_keywords/}" />
<!--[if lt IE 7]><script src="js/ie6.js" type="text/javascript"></script><![endif]-->
<style>
@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, em, img, q, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;}
html{ overflow:hidden; overflow-y:auto;}
img {border: 0 none;}
ul,dl{list-style: none outside none;}
li {list-style: none outside none;}
table {border-collapse: collapse;}
/*arial,"Hiragino Sans GB","Microsoft Yahei",sans-serif*/
body {color:#414141;font: 12px Arial,SimSun;background-color:#fff; }
a {color:#535353;text-decoration:none;}a:hover {color:#bc0f01;text-decoration:none;}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.mt2{ margin-top:2px;}.mt5{ margin-top:5px;}.mt6{ margin-top:6px;}.mt8{ margin-top:8px;}.mt10{ margin-top:10px;}.mt14{ margin-top:14px;}.mt12{ margin-top:12px;}.mt18{ margin-top:18px;}.pt5{ padding-top:5px;}.pt8{ padding-top:8px;}.red{ color:#ff0000;}.mt4{margin-top:4px;}.mb12{ margin-bottom:12px;}
.l{ float:left;}.r{ float:right;}
.none{display: none;}

.div{width:1002px;margin-left:auto;margin-right:auto;overflow: hidden;}
.div_{width:1003px;margin-left:auto;margin-right:auto;overflow: hidden;}
.div2{width:1440px; left:50%;margin-left:-720px;overflow: hidden; position:relative; z-index:1;}/*居中*/

ul.list{}
ul.list li{overflow:hidden;}
ul.list li i{ float:left; font-style:normal;}ul.list li em{ font-style:normal;color:#ed1c24; float: left;}
ul.list li a{float:left; overflow:hidden;}ul.list li span{float:right; width:70px;text-align:right; padding-right:4px;}

.bg1{background: url(images/bg1.png) no-repeat -999px -999px;}
.b1{border: 1px solid #cbcbcb;}


/*相片图集 Y*/
.kactex{padding: 28px 24px 0;}
.kactex_l{width: 834px; position:relative;}
.pic_box{width: 824px; min-height:400px;padding:4px;border: 1px solid #ccc;margin: 0 auto; overflow:hidden; text-align:center;}
.kactex_l img{margin: 0 auto;}
.kactex_l p{text-align: center;color:#595959;font-size: 14px;margin-top: 20px;margin-bottom: 20px;}

/*相片图集 X*/
.kactex_x{width:428px; height:64px;}
.kactex_x img{width: 90px;height: 58px;padding: 2px;border: 1px solid #cecece;margin-right:4px;}
.kactex_x img.curr{border: 1px solid #f60;}
#pic_x{width:350px;height:64px;overflow:hidden;}
.kactex_x .pic_btn{width: 35px;height: 64px;display: block; cursor:pointer;}
.kactex_x .prev{background: url(images/leftbig.png) no-repeat 0 6px;margin-right:4px;}
.kactex_x .next{background: url(images/rightbig.png) no-repeat 0 6px;}

.kactex_l .pic_btn2{width: 20px;height: 20px;display: block; cursor:pointer; position:absolute;top:100px;}
.kactex_l .pic_prev{background: url(images/left.png) no-repeat 5px 2px;margin-right:4px; left:-20px;}
.kactex_l .pic_next{background: url(images/right.png) no-repeat 5px 2px; right:-20px;}

/*返回顶部css*/
.backToTop{display:none;background:url(images/back_top.png)no-repeat 0 0;width:23px;height:72px;line-height:1.2;padding:5px 0;color:#fff;font-size:12px;text-align:center;position:fixed;_position:absolute;right:10px;bottom:100px;_bottom:"auto";cursor:pointer;opacity:0.7;filter:Alpha(opacity=70);}
.backToTop:hover{opacity: 100;filter: Alpha(opacity=100);}
</style>
</head>

<body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/pic_x.js" type="text/javascript"></script>
<script src="js/backtotop.min.js" type="text/javascript"></script>

<div class="div mt14 kactex">

	<div class="kactex_l">
    	<a href="" class="pic_prev pic_btn2"></a>
		  <div class="pic_box" id="pic_box"></div>
        <a href="" class="pic_next pic_btn2"></a>
		  <p>时间:2013-12-16 18:05  |  浏览111次  |  已有2条评论</p>
	</div>

	<div class="kactex_x">
    	<a herf="" class="prev pic_btn l">&nbsp;</a>
    	<div id="pic_x" class="l">
    	  <div><img src="131212/1-1312121I315-lp.jpg" datasrc="131212/1-1312121I315.jpg" width="90" height="58" /><img src="131212/1-1312121I326-lp.jpg" datasrc="131212/1-1312121I326.jpg" width="90" height="58" /><img src="131212/1-1312121I338-lp.jpg" datasrc="131212/1-1312121I338.jpg" width="90" height="58" /><img src="131212/1-1312121I346-lp.jpg" datasrc="131212/1-1312121I346.jpg" width="90" height="58" /><img src="131212/1-1312121I354-lp.jpg" datasrc="131212/1-1312121I354.jpg" width="90" height="58" /><img src="131212/1-1312121I406-lp.jpg" datasrc="131212/1-1312121I406.jpg" width="90" height="58" /><img src="131212/1-1312121I418-lp.jpg" datasrc="131212/1-1312121I418.jpg" width="90" height="58" /><img src="131212/1-1312121I427-lp.jpg" datasrc="131212/1-1312121I427.jpg" width="90" height="58" /><img src="131212/1-1312121I437-lp.jpg" datasrc="131212/1-1312121I437.jpg" width="90" height="58" /><img src="131212/1-1312121I443-lp.jpg" datasrc="131212/1-1312121I443.jpg" width="90" height="58" /><img src="131212/1-1312121I1280-L.jpg" datasrc="131212/1-1312121I1280-L.jpg" width="90" height="58" />
          
          <p class="for_pic_desc">1</p>
          <p class="for_pic_desc">2</p>
          <p class="for_pic_desc">3</p>
          <p class="for_pic_desc">4</p>
          <p class="for_pic_desc">5</p>
          <p class="for_pic_desc">6</p>
          <p class="for_pic_desc">7</p>
          </div>
  	  </div>
    	<a herf="" class="next pic_btn r">&nbsp;</a>
</div>
	<script>$('#pic_box').gallery_y({next:'a.next',go:true,hasdes:true,prev:'a.prev',direction:'x',picbox:'#pic_x',maxwidth:824});</script>

</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
$().backToTop();
</script>
</body>
</html>